<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script src="dm/lib/jquery/jquery.js"></script>
    <script src="/js/jquery.util.Ajax.httpRequest.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>

    <title th:text="${title} + '!'"></title>
</head>
<body>
<div class="screen">
    <div class="send">
        <div class="input clearfix">
            <input type="text" class="text" id="msg" placeholder='内容~'>
            <div class="btn" onclick="sendMsg();">发送</div>
        </div>
    </div>
    <div class="s_show" id="messages">
        <!--            <div class="magictime twisterInUp">祝贺云南特盖则科技有限公司年会圆满成功</div>-->
    </div>
</div>




<!--        th:inline="javascript"-->
<script th:inline="javascript">

    var stompClient = null;
    //初始化websocket链接
    connect()
    function connect() {
        var socket = new SockJS(window.location.href.split("/broadcast.html")[0] + [[${endpoint}]]);
        stompClient = Stomp.over(socket);
        //模拟使用认证token -> 'websocketAccessToken': 'HWPO325J9814GBHJF933' 见：com.tgz.websocket.WebSocketConfig#configureClientInboundChannel()
        stompClient.connect({/*'websocketAccessToken': 'HWPO325J9814GBHJF933'*/}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe([[${topic}]] +"/"+roomIdFunc(), function (response) {
                //response.body
                console.log(response)
                if(response.body){
                    var broadCast = JSON.parse(response.body)
                    console.log(broadCast)
                    $("#messages").append('<div class="magictime twisterInUp">'+("roomId : " + broadCast.roomId )+'</div>')
                    $("#messages").append('<div class="magictime twisterInUp">'+("userId : " + broadCast.userId )+'</div>')
                    $("#messages").append('<div class="magictime twisterInUp">'+("message : " + broadCast.message)+'</div>')
                    $("#messages").append('<div class="magictime twisterInUp">______________________________________________________</div>')
                }
            });
        },{});
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }
    window.onunload = function(){
        //页面卸载
        disconnect()
    }

    function sendMsg() {
        var message = document.getElementById('msg').value;
        //[目标用户ID]
        var roomId = roomIdFunc()
        //[本用户ID]
        var userId = userIdFunc()

        //stompClient直接发送消息，不走http中转 : /websocketClientDirectorPushToBroadCast
        //模拟使用认证token -> 'websocketAccessToken': 'HWPO325J9814GBHJF933' 见：com.tgz.websocket.WebSocketConfig#configureClientInboundChannel()
        stompClient.send("/websocketClientDirectorPushToBroadCast", {/*'websocketAccessToken': 'HWPO325J9814GBHJF933'*/}, JSON.stringify({
            'roomId': roomId,
            'userId': userId,
            'message': message
        }));
    }
    function roomIdFunc(){
        //http://localhost:8888/broadcast.html?roomId=111-222&userId=111
        return  window.location.href.split("?roomId=")[1].split("&userId=")[0];
    }
    function userIdFunc(){
        //http://localhost:8888/broadcast.html?roomId=111-222&userId=111
        return window.location.href.split("&userId=")[1];
    }

</script>
</body>
</html>